<template>
  <div class="home-leftcenter-bottom-wrapper">
    <comp-title :text="title" ref="compTitle"></comp-title>
    <custom-legend v-model="legens"
        ref="customLegend"
        class="hone-custom-legend"></custom-legend>
		<div class="home-lc-chart" ref="chartBox">
			<pieChart ref="pieChart" :data="listData" :colors="colors" class="lc-pie-chart"></pieChart>
<!--      <chartTitle ref="chartTitle" class="lc-chart-title" :data="titleValue"></chartTitle>-->
		</div>
    <img src="../../../assets/imgs/left/bottomBg.png" class="bt-bg" ref="btBg">
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CompTitle from '@/components/common/compTitle.vue'
import CustomLegend from '@/components/common/customLegend1.vue'

import pieChart from '@/components/common/pieChart'
import chartTitle from './chartTitle'
import axios from 'axios'
export default {
  components: { CompTitle,pieChart,chartTitle, CustomLegend },
  data() {
    return {
      colors: ['#005cf0', '#faa23f', '#ed3445'],
      legens: [
        {
          name: '正常调用',
          color: '#005cf0'
        },
        {
          name: '异常调用',
          color: '#faa23f'
        },
        {
          name: '无法调用',
          color: '#ed3445'
        }
      ],
      title:'活动占比情况',
      listData:[],
      
    }
  },
  created() {
  },
  mounted() {
    this.getData()
  },
  computed: {
    ...mapState(['dataSet'])
  },
  watch: {},
  methods: {
    handleData() {
      
    },
    getData(){
      var data = { 'account': '2020-06', 'tenant_id': 'uni099'}
      axios.post(apiUrl + 'api/bigscreen/activeRatio', data).then(res => {
        if (res.data.length>0){
          var list=[];
          for (var i =0 ; i < res.data.length; i++){
            this.legens[i].name=res.data[i].name;
            list.push(res.data[i])
          }
          this.listData=list;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    init() {
      let tl = new TimelineMax({})
      let chartBox = TweenMax.from(this.$refs.chartBox, .3, {opacity: 0})
      let btBg = TweenMax.from(this.$refs.btBg, .3, {opacity: 0})
      tl.addLabel('start')
        .add(this.$refs.compTitle.init(), 'start+=0')
        .add(chartBox,'start+=0.5')
        // .add(this.$refs.chartTitle.init(),'start+=0.6')
        .add(this.$refs.pieChart.init, 'start+=0.8') 
        .add(btBg,'start+=0.9') 
        .add(this.$refs.customLegend.init(), 'start+=0.8')
      return tl
		}
	}
}
</script>
<style lang='scss' scoped>
	.home-leftcenter-bottom-wrapper {
		.home-lc-chart {
			width: 420px;
			height: 230px;
      top: 20px;
      position: relative;
			// border: 1px solid #f00;
      .lc-chart-title {
        position: absolute;
        top: 110px;
        left: 160px;
      }
		}
   
	}
  .hone-custom-legend {
    position: absolute;
    top: 30px;
    left: 0;

    width: 100%;
  }
</style>